<template>
  <div>
    <div class="listItem" v-for="item in houseClassify" :key="item.id" @click="toHouseList(item)">
      <div class="left">
        <HouseImg :image="item.image"></HouseImg>
      </div>
        <h5 class="right">{{item.title}}</h5>
    </div>
  </div>
</template>

<script>
import { houseClassify } from '@/api/house'
export default {
  name: 'HouseIndex',

  data () {
    return {
      houseClassify: []
    }
  },
  created () {
    this.getHouseClassify()
  },
  mounted () {

  },

  methods: {
    async getHouseClassify () {
      try {
        const res = await houseClassify({
          _limit: 10
        })
        console.log(res)
        this.houseClassify = res
      } catch (error) {
        console.log(error)
      }
    },
    toHouseList (obj) {
      this.$router.push({ name: 'houseClassifyList', query: { id: obj.id, title: obj.title } })
    }
  }
}
</script>

<style lang="scss" scoped>
.listItem{
  display: flex;
  margin: 2px 3px 10px;
 ::v-deep .left .van-image{
    width: 200px;
    height: 125px;
  }
  .right{
    margin: 0;
    line-height: 125px;
    text-align: center;
    flex: 1;
  }
}
</style>
